<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>用户管理</title>
		<link href="../../css/style.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="../../js/api.js"></script>
		<script type="text/javascript" src="../../js/axios.js"></script>
		<script type="text/javascript" src="../../js/jquery.js"></script>
		<script type="text/javascript" src="../../js/system/user/userList.js"></script>
		<script type="text/javascript" src="../../js/system/user/userAdd.js"></script>

		<script src="../../js/commons/react.js"></script>
		<script src="../../js/commons/reactDom.js"></script>
		<script src="../../js/commons/babel.js"></script>
		<script src="../../js/commons/antd.js"></script>
		<link href="../../css/antd.css" rel="stylesheet" />

	</head>

	<body>
		<div id="warninfo" style="width: 200px;height: 39px; background-color: #eebe77;display: none;position: fixed;
		top: 20px;left: 0;right: 0;margin: 0 auto;border-radius: 5px;font-size: 16px;line-height: 39px;text-align: center;">
		</div>
		<div class="place"> <span>位置：</span>
			<ul class="placeul">
				<li><a href="#">系统管理</a></li>
				<li><a href="#">用户管理</a></li>
			</ul>
		</div>
		<div class="rightinfo">
			<form id="from">
				<ul class="tools">
					<li> <label>员工编号:</label>
						<input type="text" id="Uid" />
					</li>
					<li> <label>员工姓名:</label>
						<input type="text" id="username" />
					</li>
					<li> <label>所属部门：</label>
						<select id="dept">
						</select>
					</li>
					<li> <label>状态：</label>
						<select id="statu">
							<option value="2"></option>
							<option value="1">在职</option>
							<option value="0">离职</option>
						</select>
					</li>
					<li id="subBut" class="subBut"><img src="../../images/t06.png" />查询</li>
					<li class="subBut" onclick="window.location.href='userAdd.html'"><img
							src="../../images/t01.png" />添加</li>
				</ul>
				<table class="tablelist">
					<thead>
						<tr>
							<th>员工编号</th>
							<th>员工姓名</th>
							<th>联系电话</th>
							<th>所属部门</th>
							<th>职位</th>
							<th>性别</th>
							<th>出生日期 </th>
							<th>状态</th>
							<th>入职时间</th>
							<th>离职时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="tbody">
					</tbody>
				</table>
				<div class="pagin">
					<div id="pagination" style="float: right;"></div>
				</div>
			</form>
			<!-- 提示框 -->
			<div id="tip" class="tip">
				<div class="tiptop"><span>提示信息</span><a onclick="tipClose()"></a></div>
				<div class="tipinfo"> <span><img src="../../images/ticon.png" /></span>
					<div class="tipright">
						<p></p>
						<cite>如果是请点击确定按钮 ，否则请点取消。</cite>
					</div>
				</div>
				<div class="tipbtn">
					<input name="" type="button" class="sure" value="确定" onclick="setStatu()" />
					&nbsp;
					<input name="" type="button" class="cancel" value="取消" onclick="tipClose()" />
				</div>
			</div>
		</div>
		
		<script type="text/babel">
			let obj={}
			
			const Pagination=()=>{
				const [total,setTotal]=React.useState(0)
                const [current,setCurrent]=React.useState(1)
				React.useEffect(()=>{
					getUsers(1, obj, setTotal)
					getDepts()
				},[])
				
				const changePage=(page,size)=>{
                    setCurrent(page)
					getUsers(page,obj,setTotal)
				}
				
				document.getElementById("subBut").onclick=()=>{
					let uid = $('#Uid').val()
					let username = $('#username').val()
					let dept = $('#dept').val() === '0' ? '' : $('#dept').val()
					let statu = $('#statu').val() === '2' ? '' : $('#statu').val()
					obj = {
						uid,
						username,
						dept,
						statu
					}
					getUsers(1,obj,setTotal)
				}
				
				return (
					<antd.Pagination
                        current={current}
						total={total}
						showSizeChanger={false}
						showQuickJumper
						showTotal={(total) => `共有${total}条记录`}
						onChange={changePage}
					/>
				)
			}
			
			ReactDOM.createRoot(document.querySelector('#pagination')).render(
			<Pagination/>)
		</script>
		
	</body>
</html>
